<template>
    <div class="radius-scroller-container">
        <!-- <el-button type="primary" @click="handleToggle">change</el-button> -->
        <div class="radius-scroller-viewport">
            <div
                v-for="(item, index) in data"
                :Key="item.index"
                :class="{ 'radius-scroller-item-wrapper':true }"
                :style="{
                    transform:`translate(-${ Math.abs( index - Math.floor(data.length/2) ) * 40 }px, ${ ( index - Math.floor(data.length/2)) * 100}px) scale(${ index === 2 ? 1.3 : 1})`,
                    opacity: 1 - Math.abs(index - Math.floor(data.length/2))/10 * 4
                }" 
            >
                <div class="radius-scroller-item" :style="{ backgroundImage:`url(${item.img})` }">
                    <div class="scroll-item-title">{{ item.title }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { watch, ref, reactive, onMounted, onBeforeUnmount } from 'vue';
    import Icon1 from '../../../public/scroll-icon-1.png';
    import Icon2 from '../../../public/scroll-icon-2.png';
    import Icon3 from '../../../public/scroll-icon-3.png';
    import Icon4 from '../../../public/scroll-icon-4.png';
    import Icon5 from '../../../public/scroll-icon-5.png';

    const bottomIndex = ref(5);
    const data = [{ index:1, title:'管理员', img:Icon1 }, { index:2, title:'技术员', img:Icon2 }, { index:3, title:'董事', img:Icon3 }, { index:4, title:'主管', img:Icon4 }, { index:5, title:'安保', img:Icon5 }];
    const timer = ref(null);
    let doms = null ;
    const handleToggle = ()=>{
        if ( !doms ) return;
        let prevIndex = null, prevPos = '', middleIndex = Math.floor(data.length/2);
        let newIndex = bottomIndex.value;
        bottomIndex.value = newIndex - 1 < 0 ? 4 : newIndex - 1;
        for(let i = 0; i < doms.length; i++) {
            let dom = doms[i];
            let nextIndex = i === doms.length - 1 ? 0 : i + 1;
            let nextDom = doms[nextIndex];
            //  判断当前元素是否滚动到环形最底部
            let currentStyles = window.getComputedStyle(dom);
            let nextStyles = window.getComputedStyle(nextDom);        
            // 轮询最后一个DOM，暂时关闭Transition
            if ( i === bottomIndex.value) {
                dom.style.transition = 'none';
                prevIndex = i;
                prevPos = currentStyles['transform'];      
                setTimeout(()=>{
                    if ( dom ) {
                        dom.style.transition = 'all 0.5s ease-in-out';
                    }
                }, 500)
            }
            if ( prevIndex === nextIndex ) {
                dom.style.transform = prevPos;
            } else {
                dom.style.transform = nextStyles['transform'];
                dom.style.opacity = nextStyles['opacity'];
            }          
        }
    }   
    onMounted(()=>{
        doms = document.getElementsByClassName('radius-scroller-item-wrapper');      
        timer.value = setInterval(()=>{
            handleToggle();
        }, 4000)
    })
    onBeforeUnmount(()=>{
        clearInterval(timer.value);

    })

</script>
<style scoped>
    .radius-scroller-container {
    height:100%;
    width:100%;
    position:relative;
}
.radius-scroller-viewport {
    width:60px;
    height:100px;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}
.radius-scroller-item-wrapper {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    transition:all 0.5s ease-in-out;

}
.radius-scroller-item-wrapper.motion {

}
.radius-scroller-item {
    position:absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    left:0;
    top:0;
    background-repeat: no-repeat;
    background-size:contain;
    background-position:50% 50%;
}

.scroll-item-title {
    position:absolute;
    left:50%;
    top:110%;
    white-space:nowrap;
    transform:translateX(-50%);
}
.scroll-item-text {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}
@keyframes move {
    
}
</style>